<template>
	<view class="ge-content">
		<u-navbar bgColor="#f9f9f9" height="50" :safeAreaInsetTop="true" :placeholder="true">
			<view
				class="u-nav-slot"
				slot="left"
			>
				<view style="display: flex;justify-content: flex-start;">
					<u-icon name="arrow-leftward" color="rgb(153 153 153)" size="28" @click="back()"></u-icon>
					<view style="margin-left: 40rpx;"></view>
					<u-search 
						:clearabled="true"
						:animation="true"
						v-model="searchParams.keyword"
						placeholder="请输入要搜索的关键字"
						@search="commit"
						shape="round">
					</u-search>
				</view>
				
			</view>
		</u-navbar>
		<!-- 页面内容 -->
		<view class="goods_list" v-if="postList.length>0">
			<view class="goods_item" @click="postsClick(item.id)" v-for="(item, index) in postList" :key="item.id">
				<image
					:src="item.imgUrls[0]"
					mode=""></image>
				<view class="price">
					<text>￥{{item.amountOfCurrentPrice}}</text>
					<text v-if="item.amountOfOriginalPrice">
						￥{{item.amountOfOriginalPrice}}
					</text>
				</view>
				<view class="name">
					<!-- <u--text lines="2"  size="13" :text="item.post.content"></u--text> -->
					<u-parse :content="item.content" :tagStyle="style"></u-parse>
				</view>
				<u-row customStyle="padding-left: 8rpx;">
					<u-col span="2"><u-avatar size="24" :src="item.userDetailVO.avatar"></u-avatar></u-col>
					<u-col span="8"><u--text :text="item.userDetailVO.nickname" :lines="1" :size="12"></u--text></u-col>
				</u-row>
			</view>
		</view>	
		<u-empty
				v-else
				text="暂未搜索到发布的内容哦!"
				textSize="20"
				textColor="#8f99a3"
				iconColor="blue"
				iconSize="160"
				marginTop="100"
				mode="list"
				icon="http://cdn.uviewui.com/uview/empty/list.png"
		>
		</u-empty>
		<view v-if="flag">
			<u-divider text="我是有底线的" :dashed="true" lineColor="rgb(131 131 133)"></u-divider>
		</view>
		<!-- 返回顶部组件 -->
		<u-back-top
			:scroll-top="scrollTop" 
			icon="http://106.13.239.254/icon/go_back.png"
			:iconStyle="iconStyle"
			top="400"
			customStyle="opacity: 0.9;">
		</u-back-top>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {getSearchList} from '../../utils/api.js'
	export default {
		data() {
			return {
				postList: [],
				searchParams: {
					keyword: '',
					pageNo: 1,
					pageSize: 10,
				},
				
				type: 3,
				flag: false,
				style: {
					div: 'overflow:hidden;text-overflow: ellipsis;-webkit-line-clamp: 3;display: -webkit-box;-webkit-box-orient: vertical;',
					span: 'color: red;font-weight: bold;',
				},
				iconStyle: {
					width: '50rpx',
					height: '50rpx',
				},
				scrollTop: 0,
			}
		},
		onLoad(option) {
			this.searchParams.keyword = option.keyword
		},
		onReady() {
			this.search(true)
		},
		onReachBottom(){
			console.log('onReachBottom ...')
			//下拉加载
			if(!this.flag){
				this.searchParams.pageNo++
				this.search(false)
			}else {
				this.flag = true
			}
		},
		//监听下拉是否出现返回顶部组件
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			back(){
				uni.$u.route({
					type: 'back',
					delta: 1,
					animationType: 'pop-out',
					animationDuration: 200
				});
			},
			commit(keyword){
				this.searchParams.keyword = keyword
				this.searchParams.pageNo = 1
				this.flag = false
				this.search(true)
			},
			search(sign){	//sign 标记是否是重新搜索
				getSearchList(this.type, {params: this.searchParams}).then(res => {
					let list = res.list
					for(let i=0; i<list.length; i++){
						list[i].imgUrls = list[i].imgUrls!=null?list[i].imgUrls.split(","):[]
					}
					if(sign){
						this.postList = list
					}else {
						this.postList = this.postList.concat(list)
					}
					if(list.length == 0) this.flag = true
				}).catch(err => {
					getApp().globalData.toast[1].message = '搜索时发生了一个错误'
					this.$refs.uToast.show({
						...getApp().globalData.toast[1],
						complete() {
							//回调
						}
					})
				})
			},
			postsClick(id){
				uni.$u.route(`/pages/goods-details/goods-details?id=${id}`);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.ge-content {
		padding-top: 20rpx;
		min-height: 100vh;
		background-color: rgb(242, 242, 242);
		.goods_list {
			padding: 0 15rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.goods_item {
				background-color: #fff;
				width: 355rpx;
				margin: 10rpx 0;	
				padding-top: 20rpx;
				padding-bottom: 10rpx;
				border-radius: 10rpx;
				image {
					width: 85%;
					height: 210px;
					display: block;
					margin: auto;
				}
		
				.price {
					color: #b50e03;
					font-size: 36rpx;
					width: 94%;
					margin-left: 8rpx;
					margin-top: 32rpx;
					text:nth-child(2) {
						color: #ccc;
						font-size: 28rpx;
						margin-left: 17rpx;
						text-decoration: line-through;
					}
				}
		
				.name {
					font-size: 28rpx;
					line-height: 50rpx;
					padding-top: 10rpx;
					padding-bottom: 8rpx;
					width: 94%;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>
